<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="viewport" content="width=device-width, initial-scale=1.0,minimum-scale=1.0,maximum-scale=1.0,user-scalable=yes">
  <title>渝中区信息化项目管理系统</title>
  <style>
    body {
      height: 100%;
      -moz-osx-font-smoothing: grayscale;
      -webkit-font-smoothing: antialiased;
      text-rendering: optimizeLegibility;
      font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, Arial, sans-serif;
    }
    html {
      height: 100%;
      width: 100%;
    }
    body, div, dl, dt, dd, ul, ol, li, h1, h2, h3, h4, h5, h6, pre, code, form, input, button, textarea, p, th, td { 
      margin: 0; padding: 0; 
      font-family: "微软雅黑"; 
    }
    fieldset, img { border: 0; }
    ul, ol, li { list-style: none; font-family:'Microsoft YaHei'; }
    #pageBox{
      width: 100%;
      height: 100%;
      
    }
    .title-container{
      height: 3.875rem;
      background-color: #3171EE;
    }
    .title-container div {
      height: 1.25rem;
    }
    .title-container p {
      height: 2.625rem;
      line-height: 2.625rem;
      color: rgba(255,255,255,0.90);
      text-align: center;
      font-weight: 600;
      font-size: 1.0625rem;
    }
    .content-container{
      display: flex;
      flex-direction: column;
      justify-content: start;
      align-items: center;
      background: #f6f6f6;
    }
    .content-card{
      width: calc(92% - 32px);
      background: #ffffff;
      border-radius: 4px;
      padding: 24px 16px;
    }
    .content-card-one{
      margin: 15px 0;
      min-height: 288px;
    }
    .content-card-one .content-details{
      color: #3171EE;
      height: 24px;
      line-height: 24px;
    }
    .content-card-one .content-details img{
      width: 24px;
      height: 24px;
      vertical-align: middle;
    }
    .content-card-one .content-text{
      color: #000;
      font-size: 17px;
      margin: 16px 0;
    }
    .content-card-one .content-border{
      width: 100%;
      border: 1px solid rgba(49,113,238,0.10);
      margin-bottom: 16px;
    }
    .content-card-two{
      min-height: 88px;
    }
    .content-card-two .content-accept-title{
      font-size: 17px;
      font-weight: 700;
      margin-bottom: 16px;
    }
    .content-card-two .content-accept-btn{
      display: flex;
      justify-content: space-between;
      margin-bottom: 20px;
    }
    .content-card-two .content-accept-btn .btn{
      width: 148px;
      height: 48px;
      line-height: 48px;
      text-align: center;
      background: #f6f6f6;
      border-radius: 4px;
      font-size: 17px;
      outline: none;
      border: none;
    }
    .content-btn{
      margin: 20px 0;
      width: 92%;
      height: 48px;
      line-height: 48px;
      background: #3171ee;
      border-radius: 4px;
      text-align: CENTER;
      color: #ffffff;
    }
    .textarea-outBox{
      width: calc(100%-48px);
      padding: 12px 24px;
      background-color: #f6f6f6;
    }
    .textarea-outBox .textarea{
      width: 100%;
      height: 132px;
      background-color: #f6f6f6;
      border: none;
      outline: none;
      font-size: 17px;
    }
    #noAcceptExplain{
      display: none;
    }
    .tip-dialog{
      width: 259px;
      height: 88px;
      line-height: 88px;
      background: rgba(0,0,0,0.75);
      border-radius: 4px;
      color: #fff;
      text-align: center;
      font-size: 17px;
      position: fixed;
      bottom: 130px;
      display: none;
    }
    .tip-dialog img{
      width: 22px;
      height: 22px;
      vertical-align: middle;
      margin-right: 10px;
    }
    .tip-dialog .cancel-btn{
      position: absolute;
      top: 5px;
      right: 0;
    }
    #acceptDetails{
      display: none;
    }
    /* 提示弹窗 */
    #alertDialogDemo{
      width: 100%;
      height: 100%;
      background: transparent;
      position: fixed;
      left: 0;
      top: 0;
      /* display: flex; */
      align-items: center;
      justify-content: center;
      display: none;
    }
    #alertDialogDemo #alertDialog{
      width: 18rem;
      height: 88px;
      line-height: 88px;
      background: rgba(0,0,0,0.75);
      border-radius: 4px;
      color: #fff;
      text-align: center;
      font-size: 17px;
      position: relative;
    }
    #alertDialogDemo #alertDialog #cancelAlertDialog{
      width: 22px;
      height: 22px;
      position: absolute;
      top: 2px;
      right: 2px;
    }
  </style>
  <script src="./js/axios.min.js"></script>
</head>
<body>
  <div id="pageBox">
    <div class="title-container"><div></div><p>任务详情</p></div>
    <div class="content-container">
      <div class="content-card content-card-one">
        <div class="content-details">
          <img src="./imgs/sign_icon.png" alt="">
          任务名称
        </div>
        <div class="content-text" id="taskName">渝中区信息化项目审批系统方案评审</div>
        <div class="content-border"></div>
        <!-- <div class="content-details">
          <img src="./imgs/sign_icon.png" alt="">
          评审时间
        </div>
        <div class="content-text" style="display:none;" id="reviewTime">2021-1-1 9:30～12:00</div>
        <div class="content-border"></div> -->
        <div class="content-details">
          <img src="./imgs/sign_icon.png" alt="">
          评审地点
        </div>
        <div class="content-text" id="reviewAddress">渝中区信息化项目审批系统方案评审</div>
      </div>
      <div class="content-card content-card-one" id="acceptDetails">
        <div class="content-details">
          <img src="./imgs/sign_icon.png" alt="">
          是否接受任务
        </div>
        <div class="content-text" id="detailsNoAcceptResult"></div>
        <div class="content-border"></div>
        <div class="content-details">
          <img src="./imgs/sign_icon.png" alt="">
          处理时间
        </div>
        <div class="content-text" id="detailsNoAcceptTime"></div>
        <div class="content-border"></div>
        <div class="content-details">
          <img src="./imgs/sign_icon.png" alt="">
          不接受说明
        </div>
        <div class="content-text" id="detailsNoAcceptReason"></div>
      </div>
      <div class="content-card content-card-two" id="acceptHandel">
        <div class="content-accept-title">是否接受任务?</div>
        <div class="content-accept-btn">
          <button class="btn" id="acceptBtn">接受</button>
          <button class="btn" id="noAcceptBtn">不接受</button>
        </div>
        <div id="noAcceptExplain">
          <div class="content-accept-title">不接受说明</div>
          <div class="textarea-outBox">
            <textarea name="description" class="textarea" placeholder="请输入不接受原因" maxlength="100" id="noAcceptrefuseReason"></textarea>
          </div>
        </div>
      </div>
      <div class="content-btn" id="submitBtn">提交</div>
      <div class="tip-dialog" id="tipDialog">
        <img src="./imgs/success_icon.png" alt="">提交成功(<span id="timer">5</span>s)
        <img src="./imgs/cancel_icon.png" class="cancel-btn" id="cancelBtn">
      </div>
    </div>
  </div>
  <div id="alertDialogDemo">
    <div class="alert-dialog" id="alertDialog">
      <span id="textTip"></span>
      <img src="./imgs/cancel_icon.png" id="cancelAlertDialog">
    </div>
  </div>
</body>
<script>
  var url = window.location.href;
  // 返回当前页面的路径和文件名，如：/testdemo/test.html
  var pathname = window.location.pathname;
  // 返回 web 主机的端口，如：8080
  var port = window.location.port;
  // 返回所使用的 web 协议，如：http:
  var protocol = window.location.protocol;
  // 获取参数，如：?id=1&name=test
  var search = window.location.search;
  // 获取指定参数值
  var reviewTaskId = getURLParameter(url,"reviewTaskId"); 
  var userId = getURLParameter(url,"userId"); 

  let taskNameDom = document.getElementById('taskName');
  let reviewTimeDom = document.getElementById('reviewTime');
  let reviewAddressDom = document.getElementById('reviewAddress');
  function getURLParameter(url, paramName) {
    var urlParams = url.split("?")[1]; //或者url.search获取参数字符串
    var paramArray = urlParams.split("&");
    var len = paramArray.length;
    var paramObj = {}; //json对象
    var arr = []; //数组对象
    for (var i = 0; i < len; i++) {
      arr = paramArray[i].split("=");
      paramObj[arr[0]] = arr[1];
    }
    for (key in paramObj) {
      if (key == paramName) {
        return paramObj[paramName];
        break;
      }
    }
  }
  // axios({
  //   method: "get",
  //   url: "/yzq_manage_api/h5/detailByTask/"+reviewTaskId,
  // }).then(res=>{
  //   console.log(111,res);
  //   if(res.status===200){
  //     taskNameDom.innerText=res.data.taskName;
  //     reviewTimeDom.innerText=res.data.reviewTimeStart.substring(0, 16) + '\n~\n' + res.data.reviewTimeEnd.substring(0, 16);
  //     reviewAddressDom.innerText=res.data.reviewAddress;
  //   }
  // });
  getDetails();
  /** 点击接受、不接受按钮 */ 
  let acceptBtnDom = document.querySelector('#acceptBtn');
  let noAcceptBtnDom = document.querySelector('#noAcceptBtn');
  let noAcceptExplainDom = document.querySelector('#noAcceptExplain');
  let refuseReason = document.querySelector('#noAcceptrefuseReason');
  let alertDialogDemoDom = document.getElementById("alertDialogDemo");
  let cancelAlertDialogDom = document.getElementById("cancelAlertDialog");
  let textTipDom = document.getElementById("textTip");
  let receiveStatus = undefined;
  acceptBtnDom.addEventListener('click',()=>{
    noAcceptExplainDom.style.display='none';
    acceptBtnDom.style.border='1px solid #3171ee';
    acceptBtnDom.style.background='rgba(49,113,238,0.10)';
    noAcceptBtnDom.style.border='#f6f6f6';
    noAcceptBtnDom.style.background='#f6f6f6';
    receiveStatus = 1 //接受
  });
  noAcceptBtnDom.addEventListener('click',()=>{
    noAcceptExplainDom.style.display='block'
    noAcceptBtnDom.style.border='1px solid #3171ee';
    noAcceptBtnDom.style.background='rgba(49,113,238,0.10)';
    acceptBtnDom.style.border='#f6f6f6';
    acceptBtnDom.style.background='#f6f6f6';
    receiveStatus = 2  //不接受
  });
  /** 点击提交按钮 */ 
  let submitBtnDom = document.querySelector('#submitBtn');
  let tipDialogDom = document.querySelector('#tipDialog');
  let cancelBtnDom = document.querySelector('#cancelBtn');
  let timerDom = document.querySelector('#timer');
  let acceptDetailsDom = document.querySelector('#acceptDetails');
  let acceptHandelDom = document.querySelector('#acceptHandel');

  let detailsNoAcceptResultDom = document.getElementById('detailsNoAcceptResult');
  let detailsNoAcceptTimeDom = document.getElementById('detailsNoAcceptTime');
  let detailsNoAcceptReasonDom = document.getElementById('detailsNoAcceptReason');
  submitBtn.addEventListener('click',()=>{
    console.log(receiveStatus,refuseReason.value);
    if(!receiveStatus){
      // alert('请选择是否接受任务！')
      alertDialogDemoDom.style.display='flex';
      textTipDom.innerText = '请选择是否接受任务！'
    }else{
      if(receiveStatus === 1){
        getDealWith();
      }else if(receiveStatus === 2){
        if(!refuseReason.value){
          // alert('请输入不接受原因')
          alertDialogDemoDom.style.display='flex';
          textTipDom.innerText = '请输入不接受原因'
        }else{
          getDealWith();
        }        
      }
    }
  });
  // 点击提交按钮请求数据
  function getDealWith(){
    axios({
    method: "put",
    url: "/yzq_manage_api/h5/dealWith",
    params: {
      reviewTaskId: reviewTaskId,
      receiveStatus: receiveStatus,
      refuseReason:refuseReason.value,
      userId:userId
    }
  }).then(res=>{
      if(res.data.code === 200){
        // 倒计时弹窗显示
        tipDialogDom.style.display='block';
        timerDom.innerHTML = 5
        var t = 5;
        var timer = setInterval(function(){
          timerDom.innerHTML = t;
          t--;
          if(t<0){
            clearInterval(timer);
            tipDialogDom.style.display='none';
            acceptHandelDom.style.display='none';
            submitBtnDom.style.display='none';
            acceptDetailsDom.style.display='block';
            // 提交成功之后查看详情
            getDetails();
          }else{
            cancelBtnDom.addEventListener('click',()=>{
              clearInterval(timer);
              tipDialogDom.style.display='none';
              acceptHandelDom.style.display='none';
              submitBtnDom.style.display='none';
              acceptDetailsDom.style.display='block';
              timerDom.innerHTML = 5
              // 提交成功之后查看详情
              getDetails();
            });
          }
          }, 1000)
      }else{
        // alert(res.data.msg)
        alertDialogDemoDom.style.display='flex';
        textTipDom.innerText = '状态为待接受才能进行处理操作！'
      }
    });
  }
  // 查看详情数据
  function getDetails(){
    axios({
      method: "get",
      url: "/yzq_manage_api/h5/expertReceiveInfo/" + reviewTaskId,
      params:{userId: userId,}
    }).then(res=>{
      if(res.data.code===200){
        //任务详情
        taskNameDom.innerText=res.data.data.taskName;
        // reviewTimeDom.innerText=res.data.data.reviewTimeStart.substring(0, 16) + '\n~\n' + res.data.data.reviewTimeEnd.substring(0, 16);
        reviewAddressDom.innerText=res.data.data.reviewAddress;
        //提交之后的详情
        detailsNoAcceptResultDom.innerText=res.data.data.receiveStatus==='1'?'接受':res.data.data.receiveStatus==='2'?'不接受':'';
        detailsNoAcceptTimeDom.innerText=res.data.data.dealTime.substring(0, 16)
        detailsNoAcceptReasonDom.innerText=res.data.data.refuseReason;
        if(res.data.data.receiveStatus === '0'){
          acceptHandelDom.style.display='block';
          submitBtnDom.style.display='block';
          acceptDetailsDom.style.display='none';
        }else{
          acceptHandelDom.style.display='none';
          submitBtnDom.style.display='none';
          acceptDetailsDom.style.display='block';
        }
      }
    })
  }
  // 点击关闭弹窗按钮
  cancelAlertDialogDom.addEventListener('click',()=>{
    alertDialogDemoDom.style.display='none';
  })
</script>
</html>